<template>
  <div class="qrcodes-create-page">
    <NavigationBarBack title="新建锁客二维码" />
    <div class="alter-box">
      <div class="warning-svg">
        <svg-icon class-name="warning-svg" icon-class="warning" />
      </div>
      <div class="waring-text">
        <div>
          当客户已添加企微成员时，扫码后显示已添加企微成员的二维码，否则显示渠道活码
        </div>
      </div>
    </div>
    <el-form ref="form" :model="form" label-width="140px" class="qrcodes-form" label-position="right">
      <div class="config-box">
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">基础信息</div>
          </div>
          <div class="card-content">
            <el-form-item label="选渠道活码：">
              <div class="rows-center">
                <el-button plain icon="el-icon-plus" size="small" @click="isShowQrcodes = true">选择活码</el-button>
                <a style="color: #2f54eb;margin-left: 10px;"  @click="onNavigationTo('/hook/qrcodes')">新建渠道活码>></a>
              </div>
            </el-form-item>
            <el-form-item label="二维码设置：">
              <el-button icon="el-icon-upload2" plain size="small">上传二维码头像</el-button>
              <div>
                <div class="qrcode-preview"></div>
                <span style="color: rgba(0,0,0,.45); margin-left: 8px;">注：此二维码仅作为预览效果展示，切勿直接使用</span>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="config-box">
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">已添加成员设置</div>
          </div>
          <div class="card-content">
            <el-form-item label="展示方式：">
              <el-radio-group v-model="form.showType">
                <el-radio :label="1"><span style="color: rgba(0,0,0,.65);">显示已加成员二维码</span></el-radio>
                <el-radio :label="2"><span style="color: rgba(0,0,0,.65);">跳转链接</span></el-radio>
              </el-radio-group>
              <div class="online-wrap" v-if="form.showType === 1">
                <span class="context">
                  优先展示
                  <span
                    style="line-height: 28px;background: rgb(255, 255, 255);border: 1px solid #e9e9e9;padding: 2px 7px;display: inline-block;">打企业标签数最多</span>
                  的成员，当打企业标签数一致时，显示
                  <el-select v-model="form.showStatus" placeholder="请选择" style="width: 120px;" size="small">
                    <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                  的成员
                </span>
              </div>
              <div class="online-wrap" v-if="form.showType === 2">
                <el-input v-model="form.address" size="small" style="width: 400px;"
                  placeholder="请输入以http://或https://开头的跳转url" />
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="config-box">
        <div class="config-settig-card">
          <div class="card-head">
            <div class="card-title">页面样式设置</div>
          </div>
          <div class="card-content flex-wrap">
            <div class="left-content">
              <el-form-item label="页面标题：">
                <el-input type="text" placeholder="请输入内容" v-model="form.name" maxlength="10" show-word-limit
                  style="width: 400px;" />
              </el-form-item>
              <el-form-item label="企业LOGO：">
                <el-upload v-model="form.imageUrl" class="create-avatar-uploader"
                  action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
                  :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                  <img v-if="form.groupLogo" :src="form.imageUrl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <div class="upload-tips">图片小于2M</div>
              </el-form-item>
              <el-form-item label="企业名称：">
                <el-radio-group v-model="form.companyType">
                  <el-radio :label="1"><span style="color: rgba(0,0,0,.65);">企业简称</span></el-radio>
                  <el-radio :label="2"><span style="color: rgba(0,0,0,.65);">企业全称</span></el-radio>
                  <el-radio :label="3"><span style="color: rgba(0,0,0,.65);">自定义</span></el-radio>
                </el-radio-group>
                <div class="online-wrap" v-if="form.companyType === 3">
                  <el-input type="text" placeholder="限15字符以内" v-model="form.name" maxlength="10" show-word-limit
                    style="width: 400px;" />
                </div>
              </el-form-item>
              <el-form-item label="引导文案：">
                <el-input type="text" placeholder="限15字符以内" v-model="form.name" maxlength="10" show-word-limit
                  style="width: 400px;" />
              </el-form-item>
            </div>
            <div class="right-content">
              <div class="preview-mobile-content">
                <div class="mobile-nav-bar">
                  <div class="nav-bar-title">标题</div>
                </div>
                <div class="preview-content">
                  <div class="qrcode-box">
                    <div class="qrcode">
                      <img class="cover"
                        src="https://cdn-qyb-hz.wxb.com/u/5424982/qyb/20240318/1add7dd7c8b1b4309432f879f6cd28b2.jpg" />
                    </div>
                    <div class="bottom-text">若无法识别可截屏保存后添加</div>
                  </div>
                </div>
              </div>
              <div class="right-bottom-tip">注：此二维码只是预览效果，请勿直接使用</div>
            </div>
          </div>
        </div>
      </div>
    </el-form>
    <SelectQrcodesDialog :visible="isShowQrcodes" @handCloseDialog="onHandCloseSelectQrcodesDialog" />
  </div>
</template>
<script>
import NavigationBarBack from '@/components/NavigationBarBack'
import SelectQrcodesDialog from './components/selectQrcodesDialog.vue'
export default {
  data() {
    return {
      form: {
        name: '',
        switch: false,
        autoRemark: false,
        showType: 1,
        addFriend: 2,
        firendCount: 1,
        account: 0,
        dayCount: 1,
        showStatus: 1,
        address: '',
        companyType: 1
      },
      status: [
        { value: 1, label: '最早添加' },
        { value: 2, label: '最晚添加' }
      ],
      isOpen: true,
      checkTimer: false,
      checkeAccount: false,
      isShowQrcodes: false,
    }
  },
  components: {
    NavigationBarBack,
    SelectQrcodesDialog
  },
  methods: {
    onNavigationTo(path) {
      this.$router.push(path)
    },
    onHandCloseSelectQrcodesDialog() {
      this.isShowQrcodes = false
    },
  },
}
</script>
<style lang="scss" scoped>
.qrcodes-create-page {
  height: calc(100vh - 48px);
  overflow: auto;
  position: relative;

  .alter-box {
    box-sizing: border-box;
    margin: 0;
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    background-color: #f0f7ff;
    font-variant: tabular-nums;
    line-height: 24px;
    position: relative;
    display: flex;
    padding: 8px 15px;
    word-wrap: break-word;

    .warning-svg {
      font-size: 18px;
    }

    .waring-text {
      margin-left: 8px;
    }
  }

  .qrcodes-form {
    margin: 12px 12px 76px;

    .config-box {
      margin: 0 auto;
      width: 1000px;
      display: flex;
      flex-direction: column;

      .config-settig-card {
        background: #ffffff;
        margin-top: 12px;
        flex: 1 1;
        text-align: left;
        text-align: initial;
        color: rgba(0, 0, 0, 0.85);
        border-radius: 4px;
        background: #fff;
        font-size: 14px;

        .card-head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #e9e9e9;

          .card-title {
            padding: 16px;
            display: flex;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);

            .switch-form {
              margin-left: 8px;
              display: flex;
              align-items: center;
              gap: 8px;

              .switch-span {
                font-size: 14px;
                color: rgba(0, 0, 0, .45);
              }
            }
          }

          .card-extra {
            display: flex;
            align-items: center;
            padding-right: 20px;
            font-weight: 400;
            font-size: 14px;
            color: rgba(0, 0, 0, .65);
          }

          .tips-text {
            display: block;
            color: rgb(47, 84, 235);
            cursor: pointer;
            font-size: 12px;
            font-weight: 400;
            margin-right: 20px;
          }
        }

        .card-content {
          padding: 12px;
          font-size: 14px;

          &.flex-wrap {
            display: flex;
            padding: 0;
          }

          .rows-center {
            display: flex;
            align-items: center;
          }

          .item-extra {
            clear: both;
            min-height: 24px;
            padding-top: 0;
            color: rgba(0, 0, 0, .45);
            font-size: 14px;
            line-height: 1.5715;
            transition: color .3s cubic-bezier(.215, .61, .355, 1);
          }

          .backup-setting {
            display: flex;
            margin-top: 20px;
            background: #fff;
            border: 1px solid #e9e9e9;

            .backup-left {
              border-right: 1px solid #e9e9e9;
              flex: 1 1;
              height: 278px;
              padding-top: 20px;

              .empty-content {
                margin: 50px auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .empty-cover {
                  width: 80px;
                  height: 80px;
                }

                .empty-tips {
                  font-size: 14px;
                  color: rgba(0, 0, 0, .65);
                  margin-top: 8px;
                }
              }
            }

            .backup-right {
              padding-top: 20px;
              flex: 1 1;
              height: 278px;

              .right-radio {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 180px;

                span {
                  font-size: 14px;
                  font-weight: 400;
                  color: rgba(0, 0, 0, .65);
                  line-height: 20px;
                  margin-bottom: 20px;
                }

                label {
                  margin-bottom: 20px;
                }

                .radio-column {
                  display: flex;
                  flex-direction: column;
                }
              }
            }

            .title {
              display: flex;
              justify-content: space-between;
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: rgba(0, 0, 0, .65);
              line-height: 20px;
              padding: 0 20px;
            }
          }

          .online-wrap {
            margin-top: 20px;

            .context {
              color: rgba(0, 0, 0, .65);
            }
          }

          .qrcode-preview {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 150px;
            height: 150px;
            margin: 8px 0;
            border: 1px solid #e9e9e9;
            background: url(//s.yezgea02.com/static/1632997029309/qrcode.png) no-repeat;
            background-size: 140px 140px;
            background-position-x: 5px;
            background-position-y: 5px;
          }

          .left-content {
            flex: 1 1;
            padding-top: 20px;

            .create-avatar-uploader {
              .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 104px;
                height: 104px;
                line-height: 104px;
                border: 1px solid #d9d9d9;
                text-align: center;
              }

              .avatar {
                width: 104px;
                height: 104px;
                display: block;
              }
            }

            .upload-tips {
              margin-top: 8px;
              font-size: 14px;
              line-height: 22px;
              color: rgba(0, 0, 0, 0.45);
            }
          }

          .right-content {
            position: relative;
            width: 375px;
            background: #fff;
            box-shadow: -1px 0 0 0 #e9e9e9;
            padding: 20px 20px 10px;

            .preview-mobile-content {
              margin-bottom: 16px;
              border-radius: 6px;
              overflow: hidden;
              text-align: center;
              position: relative;

              .mobile-nav-bar {
                height: 70px;
                background: url("../../../assets/images/pic_mobile_head_bar.png") no-repeat 50% / cover;

                .nav-bar-title {
                  padding: 40px 60px 0;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  color: rgba(0, 0, 0, 0.65);
                  font-size: 14px;
                  font-weight: 500px;
                  line-height: 22px;
                }
              }

              .preview-content {
                padding: 20px;
                background: #f4f6fe;

                .qrcode-box {
                  background: #fff;
                  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.05);
                  border-radius: 6px;
                  padding: 20px 20px 32px;

                  .qrcode {
                    width: 200px;
                    height: 200px;
                    margin-top: 40px;
                    margin-left: auto;
                    margin-right: auto;
                    background: url("../../../assets/images/pic_mobile_qrcode.png") no-repeat 50% / cover;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .cover {
                      width: 42px;
                      height: 42px;
                      background: #fff;
                      border-radius: 4px;
                    }
                  }
                }

                .bottom-text {
                  margin-top: 20px;
                  color: rgba(0, 0, 0, 0.45);
                  font-size: 14px;
                  line-height: 22px;
                }
              }

              .preview-content-drag-mode {
                background-color: #f4f6fe;
                background-repeat: no-repeat;
                background-size: 100%;
                height: 640px;

                .drag-box {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background-color: #fff;
                  border: 1px dashed #e9e9e9;
                  height: 81px;
                  width: 81px;
                  cursor: move;
                  position: absolute;
                  top: 0px;
                  left: 0px;
                }
              }
            }
            .right-bottom-tip {
              font-size: 14px;
              font-weight: 400;
              color: rgba(0, 0, 0, .45);
              line-height: 22px;
              text-align: center;
              margin: 12px 0 0;
            }
          }
        }
      }
    }
  }
}
</style>